<template>
  <div>
    <view class="content">
     <image class='background' src="../../static/images/back.jpg" mode="aspectFill"></image>
    </view>
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/grade.png" mode="aspectFill"></image></div>
</div>
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/number.png" mode="aspectFill"></image></div>
</div>
</div>
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="placeholder">{{grade}}</div>
      </div>
      <div class="weui-flex__item">
        <div class="placeholder">{{count}}</div>
      </div>
    </div>
    <button v-for="item in subjectList" :key= "item" class="subject_button" hover-class="subject_button_hover" @click="goFunction(item)">
      {{item.subject}}
    </button>
  </div>
</template>

<script>

export default {
  data () {
    return {
      grade: 0,
      count: 0,
      subjectList: []
    }
  },
  methods: {
    goFunction (item) {
      const url = ('../function/main?grade=' + this.grade + '&subject=' + item.subject + '&count=' + item.count)
      wx.navigateTo({url})
    },
    requestSubject () {
      let _that = this
      var api = 'http://120.25.78.18:8010/api/userSubject?id=1&grade=' + this.grade
      wx.request({
        url: api, // 仅为示例，并非真实的接口地址
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          for (var i = 0; i < res.data.length; i++) {
            _that.subjectList.push({
              subject: res.data[i].question_subject,
              count: res.data[i].subject_sum
            })
            _that.count += res.data[i].subject_sum
          }
        }
      })
    }
  },
  onLoad: function (option) {
    this.count = 0
    this.subjectList = []
    this.grade = option.grade
    this.requestSubject()
  }
}
</script>

<style scoped>
.subject_button {
  width:80%;
  margin-top: 70rpx;
  margin-bottom: 60rpx;
  background-color: #FFB5C5;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.subject_button_hover{
  opacity: 0.5;
}
.placeholder {
  margin: 5px;
  padding: 0 10px;
  height: 2.3em;
  line-height: 2.3em;
  text-align: center;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed;
  background-size:100% 100%;
  z-index: -1;
}
.placeholder2 {
margin-left: 65px;
margin-right: 5px;
margin-top:15px;
margin-bottom: 5px;
padding: 0 10px;
height: 2.3em;
line-height: 1em;
}
.titleicons{
  position:absolute;
  width:10%;
  height: 6%;
}
</style>
